<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息中心 - UserHub</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="messages.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            首页
                        </a>
                        <a href="messages.html" class="text-primary border-primary inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                            消息
                        </a>
                        <a href="tasks.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <!-- 搜索按钮 -->
                    <button class="p-2 rounded-full text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary mr-2 transition-colors duration-200">
                        <i class="fa fa-search"></i>
                    </button>
                    
                    <!-- 通知按钮 -->
                    <button class="p-2 rounded-full text-primary hover:bg-primary/10 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary relative mr-2 transition-colors duration-200">
                        <i class="fa fa-bell"></i>
                        <span class="absolute top-1 right-1 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
                    </button>
                    
                    <!-- 用户菜单 -->
                    <div class="ml-3 relative">
                        <div>
                            <button type="button" class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                                <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像" id="header-avatar">
                                <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">张三</span>
                                <i class="fa fa-chevron-down ml-1 text-xs text-gray-500 hidden md:block"></i>
                            </button>
                        </div>
                    </div>
                    <!--下拉菜单-->
                    <div class="user-menu-dropdown hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="user-menu-dropdown">
                            <div class="py-1">
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-profile.html'">
                                    <i class="fa fa-user-circle mr-2"></i>个人资料
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-security.html'">
                                    <i class="fa fa-lock mr-2"></i>账户安全
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-notifications.html'">
                                    <i class="fa fa-bell mr-2"></i>通知设置
                                </button>
                                <div class="border-t border-gray-100 my-1"></div>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-gray-100" id="logout-button">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                        </div>
                    
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="ml-4 md:hidden inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="mobile-menu-button">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="md:hidden hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="dashboard.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="bg-primary/10 text-primary block pl-3 pr-4 py-2 border-l-4 border-primary text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="flex flex-col md:flex-row gap-6">
            <!-- 左侧消息列表 -->
            <div class="md:w-1/3 lg:w-1/4 bg-white rounded-xl shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col">
                <!-- 搜索框 -->
                <div class="p-4 border-b border-gray-100">
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-search"></i>
                        </span>
                        <input type="text" placeholder="搜索消息..." 
                               class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm">
                    </div>
                </div>
                
                <!-- 消息分类标签 -->
                <div class="flex border-b border-gray-100">
                    <button class="flex-1 py-3 text-sm font-medium text-primary border-b-2 border-primary filter-btn" data-filter="all">
                        全部消息
                    </button>
                    <button class="flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors filter-btn" data-filter="unread">
                        未读消息
                    </button>
                    <button class="flex-1 py-3 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors filter-btn" data-filter="system">
                        系统通知
                    </button>
                </div>
                
                <!-- 消息列表 -->
                <div class="overflow-y-auto scrollbar-thin flex-grow flex-shrink-1" id="message-list-container">
                    <!-- 消息项1 - 当前选中 -->
                    <div class="p-4 border-l-4 border-primary bg-primary/5 message-hover flex items-start cursor-pointer" data-contact-id="1" data-type="user" data-read="true" data-name="李四">
                        <img src="https://picsum.photos/id/91/200/200" alt="李四头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3 flex-grow">
                            <div class="flex justify-between">
                                <h4 class="font-medium text-gray-900">李四</h4>
                                <span class="text-xs text-gray-500">10:23</span>
                            </div>
                            <p class="text-sm text-gray-700 mt-1 truncate">我们下周的会议时间可以调整一下吗？</p>
                        </div>
                    </div>
                    
                    <!-- 消息项2 - 有未读 -->
                    <div class="p-4 message-hover flex items-start cursor-pointer" data-contact-id="2" data-type="system" data-read="false" data-name="系统通知">
                        <img src="https://picsum.photos/id/22/200/200" alt="系统通知" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3 flex-grow">
                            <div class="flex justify-between">
                                <h4 class="font-medium text-gray-900">系统通知</h4>
                                <span class="text-xs text-gray-500">昨天</span>
                            </div>
                            <p class="text-sm text-gray-700 mt-1 truncate">您获得了月度最佳贡献者称号</p>
                            <div class="flex justify-between">
                                <span class="inline-block w-2 h-2 bg-red-500 rounded-full mt-1"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息项3 -->
                    <div class="p-4 message-hover flex items-start cursor-pointer" data-contact-id="3" data-type="user" data-read="true" data-name="王五">
                        <img src="https://picsum.photos/id/65/200/200" alt="王五头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3 flex-grow">
                            <div class="flex justify-between">
                                <h4 class="font-medium text-gray-900">王五</h4>
                                <span class="text-xs text-gray-500">昨天</span>
                            </div>
                            <p class="text-sm text-gray-500 mt-1 truncate">好的，我已经收到文件了，谢谢！</p>
                        </div>
                    </div>
                    
                    <!-- 消息项4 -->
                    <div class="p-4 message-hover flex items-start cursor-pointer" data-contact-id="4" data-type="user" data-read="true" data-name="赵六">
                        <img src="https://picsum.photos/id/60/200/200" alt="赵六头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3 flex-grow">
                            <div class="flex justify-between">
                                <h4 class="font-medium text-gray-900">赵六</h4>
                                <span class="text-xs text-gray-500">3天前</span>
                            </div>
                            <p class="text-sm text-gray-500 mt-1 truncate">关于项目的新需求，我们需要讨论一下</p>
                        </div>
                    </div>
                    
                    <!-- 消息项5 -->
                    <div class="p-4 message-hover flex items-start cursor-pointer" data-contact-id="5" data-type="system" data-read="true" data-name="系统通知">
                        <img src="https://picsum.photos/id/177/200/200" alt="系统通知" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3 flex-grow">
                            <div class="flex justify-between">
                                <h4 class="font-medium text-gray-900">系统通知</h4>
                                <span class="text-xs text-gray-500">1周前</span>
                            </div>
                            <p class="text-sm text-gray-500 mt-1 truncate">您的账户已成功升级为高级会员</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧消息详情 -->
            <div class="md:w-2/3 lg:w-3/4 bg-white rounded-xl shadow-sm overflow-hidden h-[calc(100vh-12rem)] flex flex-col">
                <!-- 李四的聊天窗口 -->
                <div class="chat-container flex flex-col h-full" data-contact-id="1">
                    <!-- 聊天对象信息 -->
                    <div class="p-4 border-b border-gray-100 flex items-center">
                        <img src="https://picsum.photos/id/91/200/200" alt="李四头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3">
                            <h3 class="font-medium text-gray-900">李四</h3>
                            <p class="text-xs text-green-600">在线 · 正在输入...</p>
                        </div>
                        <div class="ml-auto flex space-x-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-phone"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-video-camera"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 聊天内容区域 -->
                    <div class="flex-grow p-6 overflow-y-auto scrollbar-thin bg-gray-50 chat-messages">
                        <!-- 时间分割线 -->
                        <div class="flex justify-center my-4">
                            <span class="text-xs bg-gray-200 text-gray-600 px-3 py-1 rounded-full">今天 09:30</span>
                        </div>
                        
                        <!-- 对方消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/91/200/200" alt="李四头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    嗨，你好！关于我们上次讨论的项目，我有一些新想法想和你分享。
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">09:30</span>
                            </div>
                        </div>
                        
                        <!-- 自己消息 -->
                        <div class="flex items-start justify-end mb-6">
                            <div class="mr-3 max-w-[70%]">
                                <p class="bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm text-sm">
                                    你好！很高兴收到你的消息，我今天下午有空，我们可以那时讨论。
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block text-right">09:35</span>
                            </div>
                            <img src="https://picsum.photos/id/64/200/200" alt="自己头像" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        
                        <!-- 对方消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/91/200/200" alt="李四头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    太好了！下午3点可以吗？另外，我们下周的会议时间可以调整一下吗？
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">10:23</span>
                            </div>
                        </div>
                        
                        <!-- 自己消息 -->
                        <div class="flex items-start justify-end mb-6">
                            <div class="mr-3 max-w-[70%]">
                                <p class="bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm text-sm">
                                    下午3点没问题。下周会议时间可以调整，你有什么合适的时间吗？
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block text-right">10:25</span>
                            </div>
                            <img src="https://picsum.photos/id/64/200/200" alt="自己头像" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        
                        <!-- 输入状态提示 -->
                        <div class="flex items-start mb-6 typing-indicator">
                            <img src="https://picsum.photos/id/91/200/200" alt="李四头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 bg-white p-2 px-4 rounded-lg rounded-tl-none shadow-sm">
                                <div class="typing-animation">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息输入区域 -->
                    <div class="p-4 border-t border-gray-100">
                        <div class="flex mb-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-smile-o"></i>
                            </button>
                            <button id="image-upload-btn" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-paperclip"></i>
                                 <input type="file" id="image-file-input" accept="image/*" class="hidden">
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-picture-o"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-microphone"></i>
                            </button>
                        </div>
                        <div class="flex">
                            <input type="text" placeholder="输入消息..." 
                                   class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm mr-3 message-input">
                            <button class="bg-primary hover:bg-primary/90 text-white p-3 rounded-lg transition-colors send-button">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 系统通知聊天窗口 -->
                <div class="chat-container hidden flex flex-col h-full" data-contact-id="2">
                    <!-- 聊天对象信息 -->
                    <div class="p-4 border-b border-gray-100 flex items-center">
                        <img src="https://picsum.photos/id/22/200/200" alt="系统通知" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3">
                            <h3 class="font-medium text-gray-900">系统通知</h3>
                            <p class="text-xs text-gray-500">系统消息</p>
                        </div>
                        <div class="ml-auto flex space-x-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 聊天内容区域 -->
                    <div class="flex-grow p-6 overflow-y-auto scrollbar-thin bg-gray-50 chat-messages">
                        <!-- 时间分割线 -->
                        <div class="flex justify-center my-4">
                            <span class="text-xs bg-gray-200 text-gray-600 px-3 py-1 rounded-full">今天 08:15</span>
                        </div>
                        
                        <!-- 系统消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/22/200/200" alt="系统通知" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    恭喜您获得"月度最佳贡献者"称号！我们将为您发放相应奖励，请注意查收。
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">08:15</span>
                            </div>
                        </div>
                        
                        <!-- 时间分割线 -->
                        <div class="flex justify-center my-4">
                            <span class="text-xs bg-gray-200 text-gray-600 px-3 py-1 rounded-full">3天前</span>
                        </div>
                        
                        <!-- 系统消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/22/200/200" alt="系统通知" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    本周将进行系统维护，维护时间为周六凌晨2点至4点，期间可能无法正常使用部分功能，请提前做好准备。
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">09:30</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息输入区域 (系统通知不可回复) -->
                    <div class="p-4 border-t border-gray-100 bg-gray-50">
                        <div class="flex items-center justify-center text-gray-500 text-sm">
                            <i class="fa fa-info-circle mr-2"></i>
                            系统通知无法回复
                        </div>
                    </div>
                    
                </div>
                
                <!-- 王五的聊天窗口 -->
                <div class="chat-container hidden flex flex-col h-full" data-contact-id="3">
                    <!-- 聊天对象信息 -->
                    <div class="p-4 border-b border-gray-100 flex items-center">
                        <img src="https://picsum.photos/id/65/200/200" alt="王五头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3">
                            <h3 class="font-medium text-gray-900">王五</h3>
                            <p class="text-xs text-green-600">在线</p>
                        </div>
                        <div class="ml-auto flex space-x-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-phone"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-video-camera"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 聊天内容区域 -->
                    <div class="flex-grow p-6 overflow-y-auto scrollbar-thin bg-gray-50 chat-messages">
                        <!-- 时间分割线 -->
                        <div class="flex justify-center my-4">
                            <span class="text-xs bg-gray-200 text-gray-600 px-3 py-1 rounded-full">昨天 15:42</span>
                        </div>
                        
                        <!-- 自己消息 -->
                        <div class="flex items-start justify-end mb-6">
                            <div class="mr-3 max-w-[70%]">
                                <p class="bg-primary text-white p-3 rounded-lg rounded-tr-none shadow-sm text-sm">
                                    王五，这是我们需要的项目文件，请查收。
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block text-right">15:40</span>
                            </div>
                            <img src="https://picsum.photos/id/64/200/200" alt="自己头像" class="w-8 h-8 rounded-full object-cover">
                        </div>
                        
                        <!-- 对方消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/65/200/200" alt="王五头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    好的，我已经收到文件了，谢谢！
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">15:42</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息输入区域 -->
                    <div class="p-4 border-t border-gray-100">
                        <div class="flex mb-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-smile-o"></i>
                            </button>
                            <button id="image-upload-btn" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-paperclip"></i>
                            </button>
                            <input type="file" id="image-file-input" accept="image/*" class="hidden">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-picture-o"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-microphone"></i>
                            </button>
                        </div>
                        <div class="flex">
                            <input type="text" placeholder="输入消息..." 
                                   class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm mr-3 message-input">
                            <button class="bg-primary hover:bg-primary/90 text-white p-3 rounded-lg transition-colors send-button">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 赵六的聊天窗口 -->
                <div class="chat-container hidden flex flex-col h-full" data-contact-id="4">
                    <!-- 聊天对象信息 -->
                    <div class="p-4 border-b border-gray-100 flex items-center">
                        <img src="https://picsum.photos/id/60/200/200" alt="赵六头像" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3">
                            <h3 class="font-medium text-gray-900">赵六</h3>
                            <p class="text-xs text-gray-500">最后在线: 3天前</p>
                        </div>
                        <div class="ml-auto flex space-x-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-phone"></i>
                            </button>
                            <button id="image-upload-btn"class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-video-camera"></i>
                                 <input type="file" id="image-file-input" accept="image/*" class="hidden">
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 聊天内容区域 -->
                    <div class="flex-grow p-6 overflow-y-auto scrollbar-thin bg-gray-50 chat-messages">
                        <!-- 时间分割线 -->
                        <div class="flex justify-center my-4">
                            <span class="text-xs bg-gray-200 text-gray-600 px-3 py-1 rounded-full">3天前</span>
                        </div>
                        
                        <!-- 对方消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/60/200/200" alt="赵六头像" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    关于项目的新需求，我们需要讨论一下。客户希望增加一个数据可视化的模块。
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">14:30</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息输入区域 -->
                    <div class="p-4 border-t border-gray-100">
                        <div class="flex mb-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-smile-o"></i>
                            </button>
                            <button id="image-upload-btn" class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-paperclip"></i>
                                 <input type="file" id="image-file-input" accept="image/*" class="hidden">
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-picture-o"></i>
                            </button>
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-microphone"></i>
                            </button>
                        </div>
                        <div class="flex">
                            <input type="text" placeholder="输入消息..." 
                                   class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-sm mr-3 message-input">
                            <button class="bg-primary hover:bg-primary/90 text-white p-3 rounded-lg transition-colors send-button">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>

                    </div>
                    
                        
                    
                    
                </div>

                <!-- 系统通知聊天窗口 -->
                <div class="chat-container hidden flex flex-col h-full" data-contact-id="5">
                    <!-- 聊天对象信息 -->
                    <div class="p-4 border-b border-gray-100 flex items-center">
                        <img src="https://picsum.photos/id/22/200/200" alt="系统通知" class="w-10 h-10 rounded-full object-cover">
                        <div class="ml-3">
                            <h3 class="font-medium text-gray-900">系统通知</h3>
                            <p class="text-xs text-gray-500">系统消息</p>
                        </div>
                        <div class="ml-auto flex space-x-3">
                            <button class="p-2 text-gray-500 hover:text-primary hover:bg-gray-100 rounded-full transition-colors">
                                <i class="fa fa-ellipsis-v"></i>
                            </button>
                        </div>
                    </div>
                    
                    <!-- 聊天内容区域 -->
                    <div class="flex-grow p-6 overflow-y-auto scrollbar-thin bg-gray-50 chat-messages">
                        <!-- 时间分割线 -->
                        <div class="flex justify-center my-4">
                            <span class="text-xs bg-gray-200 text-gray-600 px-3 py-1 rounded-full">今天 08:15</span>
                        </div>
                        
                        <!-- 系统消息 -->
                        <div class="flex items-start mb-6">
                            <img src="https://picsum.photos/id/22/200/200" alt="系统通知" class="w-8 h-8 rounded-full object-cover">
                            <div class="ml-3 max-w-[70%]">
                                <p class="bg-white p-3 rounded-lg rounded-tl-none shadow-sm text-sm">
                                    您的账户已成功升级为高级会员
                                </p>
                                <span class="text-xs text-gray-500 mt-1 block">08:15</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 消息输入区域 (系统通知不可回复) -->
                    <div class="p-4 border-t border-gray-100 bg-gray-50">
                        <div class="flex items-center justify-center text-gray-500 text-sm">
                            <i class="fa fa-info-circle mr-2"></i>
                            系统通知无法回复
                        </div>
                    </div>
                    
                </div>
                
                
            </div>
            
        </div>
    </main>

    <!-- 引入自定义JS -->
    <script src="messages.js"></script>
</body>
</html>
